<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
      <template #title>
        <van-tabs swipeable v-model:active="active" left-text="返回" left-arrow @click-left="onClickLeft">
          <van-tab title="商品" :name="1"></van-tab>
          <van-tab title="详情" :name="0"></van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>
    <LeftView v-if="active"></LeftView>
    <right-view v-else></right-view>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="total" />
      <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
      <van-action-bar-button type="warning" text="加入购物车" @click=add />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant';
// pinia内部方法用于解构(避免失去响应式)
import { storeToRefs } from 'pinia'
// 导入 pinia
import { useProductStore } from '../stores/product'
import { useCart} from '../stores/carts'

import LeftView from '../productView.vue/LeftView.vue'
import rightView from '../productView.vue/rightView.vue'
// 选项卡的
const active = ref(1)
const store = useProductStore()
const ss = useCart()
const { listNum , total} = storeToRefs(ss)
const { } = storeToRefs(store)

const route = useRoute()
// 初始值 {} 不是 Product 类型, 给一个断言, 强制让他是 Product 类型
const productDate = ref<Product>({} as Product)
// 返回上一页
const onClickLeft = () => history.back();

onMounted(async () => {
  /**
   * 通过页面的参数 id, 获取产品的详情
   */
  // 调用方法 查看本地有没有这个商品的数据
  // console.log(route.params.proid);

  await store.fetchProduct(route.params.proid as string)
  // productData.value = product
  // if(product){
  //   // 说明能找到，直接使用，避免一次请求
  //   productDate.value = product
  // } else {
  //   // 说明找不到 发送请求
  //   const res = await store.requestProduct(route.params.id as string)
  //   productDate.value = res
  // }
  await ss.feAcartList()
})


// 添加商品
const add = async () => {
  let res = await store.cartACC()
  if (res.code == '200') {
    showSuccessToast('加入成功');
  }
}
</script>


